<template>
	<!-- 	table 数据表格 -->
	<el-row>
		<el-col :span="24">
			<el-table :header-cell-style="{backgroundColor:'#F4F7FA',color:'gray'}" :data="tableData" stripe
				show-overflow-tooltip>
				<el-table-column type="index" width="50" />
				<el-table-column prop="music_id" label="歌曲编号" sortable />
				<el-table-column prop="user_id" label="用户编号" sortable />
				<!-- <el-table-column prop="comments_theme" label="评论主题" sortable /> -->
				<el-table-column prop="comments_main" label="评论内容" sortable />
				<el-table-column prop="comments_state" label="评论状态" sortable>
					<template #default="scope">
						<span v-if="scope.row.comments_state === 3">未审核</span>
						<span v-if="scope.row.comments_state === 1">发布</span>
						<span v-if="scope.row.comments_state === 2">违规</span>
					</template>
				</el-table-column>
				<el-table-column prop="comments_date" label="评论时间" sortable />
				<el-table-column prop="comments_tu" label="点赞数" sortable />
				<el-table-column label="发布&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;违规&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;删除"
					fixed="right" width="230">
					<template #default="scope">
						<el-button type="primary" :icon="Select" circle size="large"
							@click="fabu(scope.row)"></el-button>
						<el-button type="warning" :icon="CloseBold" circle size="large"
							@click="weigui(scope.row)"></el-button>
						<el-button type="danger" :icon="Delete" circle size="large"
							@click="doDelete(scope.row)"></el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination style="float:right" v-model:current-page="page.pageNum" v-model:page-size="page.pageSize"
				:page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
				@change="doList" />
		</el-col>
	</el-row>
</template>

<script setup lang="ts">
	import {
		Select,
		CloseBold,
		Delete,
		Edit,
		Expand,
	} from '@element-plus/icons-vue'
	import { onMounted, ref } from 'vue';
	import axios from 'axios';
	import { ElMessage, FormInstance, ElMessageBox } from 'element-plus'
	const fabu = (comment) => {
		comment.comments_state = 1;
		axios({
			url: "/api/comments",
			method: 'PUT',
			params: Object.assign({}, comment)
		}).then(response => {
			if (response.data === true) {
				doFlushPage();		// 删除成功，查询刷新表格数据
				ElMessage.success('发布成功');
			} else {
				ElMessage.error('发布失败');
			}
		});
	}
	const weigui = (comment) => {
		comment.comments_state = 2;
		axios({
			url: "/api/comments",
			method: 'PUT',
			params: Object.assign({}, comment)
		}).then(response => {
			if (response.data === true) {
				doFlushPage();		// 删除成功，查询刷新表格数据
				ElMessage.success('操作成功');
			} else {
				ElMessage.error('操作失败');
			}
		});
	}

	//------------------------- from 表单 -----------------------------
	// 查询条件
	const comments = ref({
		comments_state: 3,
	})
	// 声明一个表单实例的ref
	const selectFormRef = ref<FormInstance>()
	// 重置表单的函数
	const doFormReset = () => {
		// 重置表单字段
		selectFormRef.value.resetFields()
		// 重置页面状态
		doPageReset();
	}

	// -------------------------- table 表格----------------------------
	// 表格数据
	const tableData = ref([
		// 	{
		// 	music_id: 1,
		// 	user_id: 1,
		// 	comments_theme: '评论主题',
		// 	comments_main: '评论内容',
		// 	comments_state: 3,
		// 	comments_date: '2022-01-01',
		// 	comments_tu: 1
		// }, {
		// 	music_id: 2,
		// 	user_id: 2,
		// 	comments_theme: '评论主题',
		// 	comments_main: '评论内容',
		// 	comments_state: 3,
		// 	comments_date: '2022-01-01',
		// 	comments_tu: 1
		// }

	]);

	// 分页信息
	const page = ref({
		pageNum: 1,
		pageSize: 5,
		pages: 0,
		total: 0
	})

	const doPageReset = () => {
		page.value.pageNum = 1;
		page.value.pageSize = 5;
	}


	//--------------------------- CRUD ---------------------------
	// 查询评论状态为未审核的评论
	const doList = () => {
		axios({
			url: '/api/comments/list',
			method: 'GET',
			params: Object.assign({}, comments.value, { pageNum: page.value.pageNum, pageSize: page.value.pageSize })
		}).then(response => {
			console.log(response.data)
			tableData.value = response.data.list;
			// 分页信息
			page.value.pages = response.data.pages;
			page.value.total = response.data.total;
		});
	}

	// 删除
	const doDelete = (comment) => {
		ElMessageBox.confirm(
			'确定删除这条评论吗?',
			'警告',
			{
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}
		)
			.then(() => {
				// 执行删除请求
				axios({
					url: "/api/comments/" + comment.comments_id,
					method: 'DELETE',
				}).then(response => {
					if (response.data === true) {
						doFlushPage();		// 删除成功，查询刷新表格数据
						ElMessage.success('删除成功');
					} else {
						ElMessage.error('删除失败');
					}
				})
					.catch(error => {
						// 请求失败处理
						ElMessage({
							type: 'error',
							message: '删除失败: ' + error.message,
						});
					});
			})
			.catch(() => {
				// 用户点击了取消按钮
				ElMessage({
					type: 'info',
					message: '已取消删除',
				});
			});
	};

	// const doDelete = (comment) => {
	// 	axios({
	// 		url: "/api/comments/" + comment.comments_id,
	// 		method: 'DELETE',
	// 	}).then(response => {
	// 		if (response.data === true) {
	// 			doFlushPage();		// 删除成功，查询刷新表格数据
	// 			ElMessage.success('删除成功');
	// 		} else {
	// 			ElMessage.error('删除失败');
	// 		}
	// 	});
	// }

	const doFlushPage = () => {
		doList();

	}

	onMounted(() => {
		doList();
	});
</script>

<style scoped>
</style>